<template>
  <el-container>
    <el-header>
      <div class="form-button">
        <el-button type="primary" plain icon="el-icon-plus" @click="FormVisible=true">添加学生</el-button>
        <el-button type="success" plain icon="el-icon-upload2" @click="submitForm">确认添加</el-button>
      </div>
      <add-student-from :dialog-form-visible="FormVisible" @push="pushStudent" @close="closeForm"></add-student-from>
    </el-header>
    <el-main class="card_show">
      <student-form-card
          v-for="card in studentList"
          :key="card.studentId"
          :student-id="card.studentId"
          :student-name="card.name"
          @delete="removeStudent"
      ></student-form-card>
    </el-main>
  </el-container>
</template>

<script>
//todo 2021/6/14 提交按钮:点击时将主要区域的所有信息提交


import StudentFormCard from "@/components/teacher/mianView/addStudent/StudentFormCard";
//import {studentCards} from "@/js/testConfig.mjs";
import AddStudentFrom from "@/components/teacher/mianView/addStudent/AddStudentFrom";
import axios from "axios";


export default {
  name: "AddStudentView",
  components: {AddStudentFrom, StudentFormCard},
  data() {
    return {
      studentList: [],
      FormVisible: false
    }
  },
  updated() {
    console.log(this.studentList)
  },
  methods: {
    //删除待添加的学生
    removeStudent(id) {
      this.studentList.forEach((item, index, arr) => {
        if (item.studentId === id) {
          //alert('删除学号是'+id+'的学生'+index)
          arr.splice(index, 1)
        }
      })
    },
    //将学生放入缓冲区
    pushStudent(data) {
      console.log('放入', data)
      this.studentList.push(data)
    },
    //隐藏表单
    closeForm(flag) {
      this.FormVisible = flag
    },
    //todo 2021/6/14 表单提交
    submitForm() {
      console.log('提交表单')
      console.log(this.$store.state.teacherId)
      console.log(this.submitData)
      if (this.studentList.length>0) {
        axios
            .post('teacher/addStudent', this.submitData)
            .then(response => {
              console.log('获得的信息')
              console.log(response.data)

            })
            .catch(e => {
              console.log(e)
            })
      }
      this.studentList=[]
      this.submitData={}
    }
  },
  computed: {
    submitData: {
      get:function (){
        return {'studentList': this.studentList};
      },
      set:function (){}
    }
  },
}
</script>

<style scoped>
.card_show {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start

}

.form-button {
  margin: 20px;
}
</style>